<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      /* width: 200px; */
      height: 200px;
      background-color: pink;
      /* 包含左右内边距 */
      padding: 10px;
      border: 20px solid red;
      display: inline-block;
      box-sizing: content-box;
      /* box-sizing: border-box; */
    }
  </style>
</head>

<body>
  <div>12345678910</div>
  <script>
    // clientWidth,clientHeight获取元素的可见部分宽高（不包含border，margin，滚动条等,但包含左右内边距）
    // offsetWidth,offsetHeight获取元素的自身宽高,包含元素自身设置的宽高-->内容+padding+border
    const div = document.querySelector('div')
    console.log(div.clientWidth)//118 = 内容98 + 左右各10的padding20 =118
    console.log(div.offsetWidth)//158 = 内容8 + 左右border40 + 左右各10的padding20 = 158

    // resize浏览器窗口大小发生变化的时候触发的事件
    window.addEventListener('resize', function () {
      console.log(1)
    })
  </script>
</body>

</html>